<!--
  - Copyright (c) 2019.  武汉中科图灵科技有限公司
  - Date :  2019/4/8
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.6.2
  -->
<template>
  <div class="app-container rules-list-container">
    <el-container>
      <div class="flex-left-pannel">
        <el-row>
          <div class="xf-tabletop-handles">
            <div class="xf-tabhd-left">
              <el-button class="filter-item" @click="handleCreate" type="primary" size="mini">添加传感器</el-button>
            </div>
            <div class="xf-tabhd-right">
              系列<el-input v-model="listQuery.series" placeholder="请输入系列" class="xf-query-input" clearable size="mini"></el-input>
              <el-button @click="tableQuery" type="primary" size="mini">查询</el-button>
              <el-popover
                placement="bottom-end"
                width="346"
                class="xf-custom-poper"
                v-model="visible2">
                <div class="xf-double-form">
                  <div class="xf-dbform-item">
                    <div class="xf-dbform-item__sleft">
                      <p class="xf-dbform-item__label">服务器IP</p>
                      <el-input v-model="slistQuery.serverIp" placeholder="请输入服务器IP"></el-input>
                    </div>
                  </div>
                  <div class="xf-dbform-item">
                    <div class="xf-dbform-item__sleft">
                      <p class="xf-dbform-item__label">端口号</p>
                      <el-input v-model="slistQuery.port" placeholder="请输入端口号"></el-input>
                    </div>
                  </div>
                  <div class="xf-dbform-item">
                    <div class="xf-dbform-item__sleft">
                      <p class="xf-dbform-item__label">回路</p>
                      <el-input v-model="slistQuery.sensorLoop" placeholder="请输入回路"></el-input>
                    </div>
                  </div>
                  <div class="xf-dbform-item">
                    <div class="xf-dbform-item__sleft">
                      <p class="xf-dbform-item__label">地址</p>
                      <el-input v-model="slistQuery.address" placeholder="请输入地址"></el-input>
                    </div>
                  </div>
                </div>
                <div style="text-align: left; margin: 0; margin-top:20px;">
                  <el-button size="mini" type="primary" @click="pointerQuery">查询</el-button>
                  <el-button size="mini" @click="visible2 = false" type="text">取消</el-button>
                </div>
                <el-button slot="reference" type="text" size="mini">高级查询</el-button>
              </el-popover>
            </div>
          </div>
        </el-row>
<!--      table  -->
        <el-table
          key='tableKey'
          :data="list"
          ref="multipleTable"
          v-loading.body="listLoading" fit style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column label="服务器IP">
            <template slot-scope="scope">
              <span>{{scope.row.serverIp}}</span>
            </template>
          </el-table-column>
          <el-table-column label="端口号">
            <template slot-scope="scope">
              <span>{{scope.row.port}}</span>
            </template>
          </el-table-column>
          <el-table-column label="回路">
            <template slot-scope="scope">
              <span>{{scope.row.sensorLoop}}</span>
            </template>
          </el-table-column>
          <el-table-column label="地址">
            <template slot-scope="scope">
              <span>{{scope.row.address}}</span>
            </template>
          </el-table-column>
          <el-table-column label="系列">
            <template slot-scope="scope">
              <span>{{scope.row.series}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="130" fixed="right">
            <template slot-scope="scope">
              <el-button size="small" type="text" @click="createDel(scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div v-show="!listLoading" class="sensor-pagination-container">
          <div>
            <el-checkbox v-model="isselall" :indeterminate="isIndeterminate" @change="handleCheckAllChange" v-show="list&&list.length!=0">全选</el-checkbox>
            <el-button type="text" style="margin-left: 10px;" @click="delAllSensor" v-show="list&&list.length!=0" :disabled="checklist&&checklist.length==0">全部删除</el-button>
          </div>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[10,15,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
        </div>
      </div>
    </el-container>
<!--    删除弹窗-->
    <el-dialog title="删除传感器" :visible.sync="dialogDeleteVisible" :show-close='false' custom-class="xf-jc-dialog" width="360px">
      <div class="xf-jc-deletect">
        <p>确定删除吗？</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" size="mini"  @click="deleteObj()">删除</el-button>
        <el-button size="mini" type="text" @click="dialogDeleteVisible = false">取消</el-button>
      </div>
    </el-dialog>
    <fireMainadd :Show.sync="Show" :channelId.sync="channelId" :noticeRuleId.sync="noticeRuleId" @updateList="getList"></fireMainadd>
  </div>
</template>
<script>
  import fireMainadd from "@/components/noticRulelist/firemainAdd";
  import {
    firemainPage,
    deleteSensor
  } from "@/api/datahandler/pushRules/index";

  export default{
    components:{fireMainadd},
    props:{
      noticeRuleId:{
        default:'',
      },
      channelId:{
        default:0
      }
    },
    data(){
      return{
        Show:false,
        list:[],
        listQuery: {
          page: 1,
          limit: 10,
          series:'',
          noticeRuleId:'',
          channelId:''
        },
        slistQuery:{
          port:'',
          serverIp:'',
          sensorLoop:'',
          address:''
        },
        total:0,
        listLoading:false,
        visible2:false,
        isselall:false,
        isIndeterminate:false,
        dialogDeleteVisible:false,
        checklist:[],
        delsensorid:[],
      }
    },
    created(){
      this.listQuery.noticeRuleId = this.noticeRuleId;
      this.listQuery.channelId = this.channelId;
      this.getList();
    },
    methods:{
      getList(){
        this.listLoading = true;
        firemainPage(this.listQuery).then(response => {
          this.list = response.data.rows;
          this.total = response.data.total;
          this.listLoading = false;
        }).catch(()=>{
          this.listLoading = false;
        })
      },
      restQuery(){
        //重置查询
        this.slistQuery.port = '';
        this.slistQuery.serverIp = '';
        this.slistQuery.sensorLoop = '';
        this.slistQuery.address = '';
      },
      tableQuery() {
        //清空高级查询条件
        this.restQuery();
        this.getList();
      },
      pointerQuery(){
        // 高级查询
        this.visible2 = false;
        this.listLoading = true;
        // 取消绑定并合并查询条件
        this.listQuery.page = 1;
        let contactKeys = Object.assign({},JSON.parse(JSON.stringify(this.listQuery)),JSON.parse(JSON.stringify(this.slistQuery)))
        firemainPage(contactKeys).then(response => {
          this.list = response.data.rows;
          this.total = response.data.total;
          this.listLoading = false;
        });
      },
      handleCreate(){
        this.Show = true;
      },
      handleCheckAllChange(){
        this.$refs.multipleTable.toggleAllSelection();
      },
      deleteObj(){
        //执行删除操作
        deleteSensor({noticeRuleId:this.noticeRuleId,sensorIds:(this.delsensorid).toString()}).then(res=>{
            if (res.status===200){
              this.dialogDeleteVisible = false;
              this.$notify({
                title: "成功",
                message: "删除成功",
                type: "success",
                duration: 2000
              });
              this.listQuery.page = 1;
              //  清空全选
              this.isselall = false;
              this.isIndeterminate = false;
              this.getList();
            }
        })
      },
      delAllSensor(){
        this.delsensorid=[];

        this.checklist.forEach((item,index)=>{
          this.delsensorid.push(item.id);
        });
        this.dialogDeleteVisible = true;
      },
      createDel(row){
        //普通删除
        this.delsensorid = [];
        this.delsensorid.push(row.id);
        this.dialogDeleteVisible = true;
      },
      handleSelectionChange(val){
        //多选操作优化
        this.checklist=[...val];
        let length = this.total>this.list.length?this.list.length:this.total;
        this.isselall = val.length === length&&length>0;
        this.isIndeterminate = val.length>0&&val.length<length;
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      },
    },
  }
</script>
<style lang="scss">
  .rules-list-container{
    .xf-query-input,
    .xf-query-select {
      width: 200px;
      margin: 0 10px;
    }
    // 精准查询
    .xf-double-form{
      .xf-dbform-item{
        display: flex;
        justify-content: space-between;
        .xf-dbform-item__sleft{
          .el-input{
            width: 320px;
          }
        }
        .xf-dbform-item__sright{
          .el-input{
            width: 320px;
          }
        }
      }
    }
    .sensor-pagination-container{
      display:flex;
      justify-content:space-between;
      padding:10px 10px;
    }
  }
</style>
